import { Button, Card } from "@/components/base";
import { Typography } from "@/components/typography";
import { Flex } from "@/components/flex";

const { Text } = Typography;

export function Order() {
    return (
        <Card style={{ marginBottom: '16px' }}>
            <Flex justify="space-between" align="center" style={{ width: '100%', marginBottom: '12px' }}>
                <Text size={16} strong>
                    未完成订单订单
                </Text>
                <Button size="small">所有订单</Button>
            </Flex>
            <Flex vertical>
                {Array.from({ length: 2 }).map((_, index) => (
                    <div key={index} style={{
                        width: '100%',
                        border: '1px solid #f0f0f0',
                        borderRadius: '8px',
                        padding: '12px',
                        marginBottom: '8px'
                    }}>
                        <Flex vertical>
                            <Flex justify="space-between" align="center" style={{ width: '100%' }}>
                                <Text size={14} strong>{`订单${index + 1}`}</Text>
                                <Text size={12} type="secondary">{`未完成`}</Text>
                            </Flex>
                            <Text size={12} type="secondary">{`订单金额：¥100`}</Text>
                        </Flex>
                    </div>
                ))}
            </Flex>
        </Card>
    )
}